<template>
      
 	<section class="section-right">
		<!--deer-tit-->
        <router-view/>
		<div class="deer-tit">
			<h3>一键加油</h3>
			<h4>概览</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<div class="gas-border">
				<nav class="gas-nav">
					<dl day="1">今天</dl>
					<dl day="7">最近7天</dl>
					<dl day="30">最近30天</dl>
					<dl><input name="search_time" class="gas-text" type="text" placeholder="查询时间" id="search_time" value="" lay-key="1"></dl>
				</nav>
				<div class="gas-number">
					<dl>
						<dt>加油升数</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>加油笔数</dt>
						<dd>0</dd>
					</dl>
					<dl>
						<dt>成交金额</dt>
						<dd>0</dd>
					</dl>
				</div>
				<div class="gas-echarts" id="main2"></div>
				<!--折线图-->
				<div class="gas-echarts" id="main"></div>
			</div>
		</div>
        
		<!--/deer-content-->
	</section>
</template>
<script>
var echarts=require('echarts/lib/echarts')
export default{
	mounted() {
		this.$nextTick(function () {
			this.view()
			this.views()
		})	
	},
	methods:{
		view(){
 			let Chart = echarts.init(document.getElementById('main2'));
			let option = {
				    color: ['#3398DB'],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis : [
			        {
			            type : 'category',
			            data : ["-50","0","90","92","95","97","98"],
			            axisTick: {
			                alignWithLabel: true
			            }
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			        {
			            name:'升数',
			            type:'bar',
			            barWidth: '60%',
			            data:[0,0,0,0,0,0,0]		        }
			    ]
			};
			
		     Chart.setOption(option);
		},
		views(){
			let Chart = echarts.init(document.getElementById('main'));
			let option = {
			    title: {
			        text: '',
			        left:'2%'
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:["-50#","0#","90#","92#","95#","97#","98#"]		    },
			    grid: {
			        left: '3%',
			        right: '3%',
			        bottom: '3%',
			        containLabel: true
			    },
			    toolbox: {
			    	left: '95%',
			        feature: {
			            saveAsImage: {}
			        }
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ["2018-02-02"]		    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{"stack":"\u603b\u91cf","type":"line","name":"-50#","data":[0]},{"stack":"\u603b\u91cf","type":"line","name":"0#","data":[0]},{"stack":"\u603b\u91cf","type":"line","name":"90#","data":[0]},{"stack":"\u603b\u91cf","type":"line","name":"92#","data":[0]},{"stack":"\u603b\u91cf","type":"line","name":"95#","data":[0]},{"stack":"\u603b\u91cf","type":"line","name":"97#","data":[0]},{"stack":"\u603b\u91cf","type":"line","name":"98#","data":[0]}]		};
			// 使用刚指定的配置项和数据显示图表。
	
	        Chart.setOption(option);
		}
	}


}
		
</script>
<style>

</style>
